<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 设置滚动条的样式 */

    ::-webkit-scrollbar {

      width: 6px;

    }

    /* 滚动槽 */

    ::-webkit-scrollbar-track {

      -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);

      border-radius: 10px;

    }

    /* 滚动条滑块 */

    ::-webkit-scrollbar-thumb {

      border-radius: 10px;

      background: rgba(255, 255, 255, 0.295);

      -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);

    }

    ::-webkit-scrollbar-thumb:window-inactive {

      background: rgba(220, 221, 221, 0.4);

    }

    /*  */
    * {
      margin: 0;
      padding: 0;
      color: #a393ca;
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #37353a;
    }

    h2 {
      font-weight: 400;
    }

    .wrapper {
      width: 1200px;
      height: 90vh;
      min-height: 600px;
      display: flex;
      /* border-radius: 12px;
      box-shadow: 0 0 6px 3px #323034; */
    }

    .leftWarp,
    .rightWarp {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 60px;
      border-radius: 8px;
      box-shadow: 0 0 6px 3px #323034, 0 0 12px 6px #323034;
      overflow: auto;
    }

    .leftWarp h1 {
      font-size: 48px;
    }

    /* .leftWarp p {
      margin: 12px 0;
    } */

    .icon {
      width: 40px;
      height: 40px;
      line-height: 40px;
      margin: 0 12px;
      transform: rotate(90deg);
    }

    .change {
      animation: scaleIcon 1s linear;
    }

    #inputArea,
    #outputArea {
      display: block;
      width: 100%;
      height: 200px;
      margin-top: 40px;
      padding: 16px 12px;
      background-color: transparent;
      border: 1px solid #a393ca;
      border-radius: 6px;
      font-size: 24px;
      color: #fff;
      outline: none;
      text-transform: uppercase;
      resize: none;
    }

    #inputArea {
      margin-bottom: 10px;
    }

    #outputArea {
      margin-top: 10px;
    }

    .btnArea {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
    }

    .translate,
    .encryption,
    .play {
      display: flex;
      padding: 16px 22px;
      margin: 0 6px;
      font-size: 18px;
      font-weight: 700;
      color: #282d6f;
      border-radius: 8px;
      cursor: pointer;
    }

    .translate {
      background-color: #efefef;
    }

    .encryption {
      background-color: #a393ca;
    }

    .play {
      background-color: #f4b853;
    }

    .line {
      width: 100%;
      height: 4px;
      margin-top: 10px;
      background-color: #a393ca;
    }

    .codeArea {
      list-style: none;
      width: 100%;
      margin-top: 20px;
      padding: 0 20px;
      display: flex;
      flex-wrap: wrap;
    }

    .codeArea li {
      width: 32%;
      line-height: 54px;
      font-weight: 700;
      font-size: 22px;
    }

    @keyframes scaleIcon {
      0% {
        transform: rotate(90deg) scaleX(100%);
      }

      10% {
        transform: rotate(90deg) scaleX(120%);
      }

      50% {
        transform: rotate(90deg) scaleX(0%);
      }

      90% {
        transform: rotate(90deg) scaleX(120%);
      }

      100% {
        transform: rotate(90deg) scaleX(100%);
      }
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="leftWarp">
      <h2>Morse Code Translation</h2>
      <h1>摩尔斯码翻译器</h1>
      <textarea id="inputArea"></textarea>
      <image class="icon" src="image/转换.png" alt="转换图标"></image>
      <textarea id="outputArea"></textarea>
      <p>转换结果</p>
      <div class="btnArea">
        <div class="translate">翻译</div>
        <div class="encryption">解密</div>
        <div class="play">播放</div>
      </div>
    </div>
    <div class="rightWarp">
      <h2>摩尔斯码对照表</h2>
      <div class="line"></div>
      <ul class="codeArea">
        <li>· A .-</li>
        <li>· B -...</li>
        <li>· C -.-.</li>
        <li>· D -..</li>
        <li>· E .</li>
        <li>· F ..-.</li>
        <li>· G --.</li>
        <li>· H ....</li>
        <li>· I ..</li>
        <li>· J .---</li>
        <li>· K -.-</li>
        <li>· L .-..</li>
        <li>· M --</li>
        <li>· N -.</li>
        <li>· O ---</li>
        <li>· P .--.</li>
        <li>· Q --.-</li>
        <li>· R .-.</li>
        <li>· S ...</li>
        <li>· T -</li>
        <li>· U ..-</li>
        <li>· V ...-</li>
        <li>· W .--</li>
        <li>· X -..-</li>
        <li>· Y -.--</li>
        <li>· Z --..</li>
        <li>· / -..-.</li>
        <li>· 1 .----</li>
        <li>· 2 ..---</li>
        <li>· 3 ...--</li>
        <li>· 4 ....-</li>
        <li>· 5 .....</li>
        <li>· 6 -....</li>
        <li>· 7 --...</li>
        <li>· 8 ---..</li>
        <li>· 9 ----.</li>
        <li>· 0 -----</li>
      </ul>
    </div>
  </div>
</body>
<script>
  // 待启动
</script>

</html>